<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '发布活动',
  },
}
</route>

<template>
  <div class="add-evaluate-page">
    <wd-form custom-class="custom-form !mt-0 !pt-0" ref="form1" :model="mode">
      <div class="input">
        <wd-input
          type="text"
          v-model="mode.title"
          prop="title"
          :rules="[{ required: true, message: '请输入活动标题' }]"
          size="large"
          placeholder="活动标题"
        />
        <wd-textarea
          v-model="mode.blurb"
          no-border
          size="large"
          prop="blurb"
          :rules="[{ required: true, message: '请输入活动介绍' }]"
          custom-class="text-area"
          placeholder="请输入活动介绍"
        />

        <div class="upload">
          <ImgUpload v-model="mode.imgUrlList" multiple :count="20" />
        </div>
      </div>
    </wd-form>

    <wd-form custom-class="custom-form mt-28rpx" ref="form" :model="mode">
      <wd-cell title="活动类型" title-width="250rpx">
        <wd-picker
          :columns="classify"
          v-model="mode.type"
          prop="type"
          placeholder="请选择活动类型"
          :rules="[{ required: true, message: '请选择活动类型' }]"
          custom-class="card-type"
        />
      </wd-cell>
      <wd-cell title="活动开始时间" title-width="250rpx">
        <wd-datetime-picker
          v-model="mode.startTime1"
          placeholder="请选择活动开始时间"
          prop="startTime1"
          :rules="[{ required: true, message: '请选择活动开始时间' }]"
        />
      </wd-cell>
      <wd-cell title="活动结束时间" title-width="250rpx">
        <wd-datetime-picker
          v-model="mode.endTime1"
          placeholder="请选择活动结束时间"
          prop="endTime1"
          :rules="[{ required: true, message: '请选择活动结束时间' }]"
        />
      </wd-cell>
      <wd-cell title="活动地址" title-width="250rpx">
        <wd-input
          type="text"
          v-model="mode.addr"
          prop="addr"
          :rules="[{ required: true, message: '请选择活动地址' }]"
          placeholder="请输入活动地址"
        />
      </wd-cell>
      <!-- <wd-cell title="是否付费" title-width="250rpx">
        <wd-picker
          :columns="columns"
          v-model="mode.text"
          prop="text"
          placeholder="请选择是否付费"
          :rules="[{ required: true, message: '请选择是否付费' }]"
          @confirm="handleConfirm"
          custom-class="card-type"
        />
      </wd-cell> -->
    </wd-form>

    <button class="custom-button button" @click="handleSubmit">发布</button>
  </div>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs'
import { getDict, msgSuccess } from '@/utils/index'
import { back } from '@/utils/page'

const mode = reactive({
  title: '',
  blurb: '',
  imgUrlList: [],
  imgUrls: '',
  type: '',
  typeIndex: '',
  startTime1: '',
  endTime1: '',
  startTime: '',
  endTime: '',
  addr: '',
})

const classify = ref<any>([])
getDict('activity_classify').then((res: any) => {
  classify.value = res.map((_) => ({
    value: _.dictKey,
    label: _.dictValue,
  }))
})

const form = ref()
const form1 = ref()
async function handleSubmit() {
  const v1 = await form.value.validate().then(({ valid, errors }) => {
    return valid
  })
  const v2 = await form1.value.validate().then(({ valid, errors }) => {
    return valid
  })

  if (mode.imgUrlList.length === 0) {
    return
  }

  if (v1 && v2) {
    uni.showLoading()
    mode.startTime = dayjs(mode.startTime1).format('YYYY-MM-DD HH:mm:ss')
    mode.endTime = dayjs(mode.endTime1).format('YYYY-MM-DD HH:mm:ss')
    mode.imgUrls = mode.imgUrlList.join(',')
    http
      .post('/activity-app/publish', mode)
      .then(() => {
        msgSuccess('提交成功').then(() => {
          back()
        })
      })
      .finally(() => {
        uni.hideLoading()
      })
  }
}
</script>

<style lang="scss" scoped>
.add-evaluate-page {
  box-sizing: border-box;
  min-height: 100vh;
  padding: 28rpx 30rpx;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 28rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 28rpx);
  background-color: var(--bgc4);
  --wot-cell-wrapper-padding: 10px 0 10px 10px;

  .input {
    padding: 0rpx 24rpx 10rpx;
    margin-top: 0rpx;
    background-color: #fff;
    border-radius: 30rpx;
    :deep(.text-area) {
      --wot-textarea-cell-padding: 0;
      --wot-textarea-padding: 0;
      .wd-textarea__value {
        padding-right: 0;
      }
    }
    :deep(.upload-img) {
      .wd-upload__picture,
      .wd-upload__evoke {
        overflow: hidden;
        border-radius: 23rpx;
      }
    }
  }

  .button {
    position: fixed;
    inset: 40rpx 30rpx;
    top: auto;
  }
}
</style>
